@import '@/styles/variable.scss';
@import '@/styles/mixin.scss';

.playerTrans-enter-active, .playerTrans-leave-active {
  transition: all .3s ease-out;
}
.playerTrans-enter, .playerTrans-leave-to {
  opacity: 0;
  transform: translateY(10%);
}
.fadeIn-enter, .fadeIn-leave-to {
  opacity: 0;
}
.fadeIn-enter-active, .fadeIn-leave-active {
  transition: all .25s;
}

.player-comp {
  z-index: 100;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  will-change: auto;

  .player-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    .bg-inner {
      transition: all 1s;
    }
  }
  @include gaussBlur(.3rem, .6, .5rem);
  // @include gaussBlur(0, 1, 0);

  .player-box {
    background: rgb(0 0 0 / 35%);
    height: 100%;
    @include df(column);
    .navbar {
      flex-shrink: 0;
      @include df();
      align-items: center;
      justify-content: space-between;
      color: #fff;
      .iconfont {
        font-size: .24rem;
        padding: .18rem;
      }
      .navbar-text {
        text-align: center;
        line-height: 1.5;
        overflow: hidden;
        .artist {
          font-size: .12rem;
          color: rgb(225 225 225 / 50%);
          // margin-top: .06rem;
        }
      }
    }
    .middle-box {
      flex: 1;
      overflow: hidden;
      position: relative;

      .player-img, .player-lyric {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        @include df(column);
        position: relative;
        overflow: hidden;
      }
      
      .player-img {
        .top {
          flex: 1;
          @include df();
          align-items: center;
          justify-content: center;
          position: relative;
          $circleWidth: 2vh;
          .needle-box {
            position: absolute;
            left: calc(50% - ($circleWidth / 2));
            top: 0;
            z-index: 2;
            &::before {
              content: "";
              display: block;
              width: $circleWidth;
              aspect-ratio: 1;
              border-radius: 50%;
              background-color: white;
            }
          }
          .needle {
            z-index: -1;
            position: absolute;
            top: calc($circleWidth / 2);
            left: calc($circleWidth / 2);
            filter: drop-shadow(0px 2px 3px rgb(63, 63, 63));
            transform-origin: left top;
            height: 14.5vh;
            transition: all .5s cubic-bezier(0, 0, 0.2, 1);
            will-change: transform;
            // 播放状态添加类名 playing
            &.playing {
              transform: rotate(26deg);
            }
          }
          .disk-box {
            $paddingW: 12vh;
            $borderW: .8vh;
            background-image: url(../../assets/player/disc.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 50%;
            overflow: hidden;
            height: 40vh;
            max-height: 80vw;
            aspect-ratio: 1;
            padding: calc($paddingW / 2);
            border: $borderW solid rgb(233 233 233 / 10%);
            font-size: 0;
            img {
              // display: none;
              height: 100%;
              width: 100%;
              object-fit: cover;
              border-radius: 50%;
            }
            &.ready {
              animation: rotate 25s linear infinite;
              &.paused {
                animation-play-state: paused;
              }
              &.playing {
                animation-play-state: running;
              }
            }
            
            @keyframes rotate {
              0% {
                transform: rotate(0);
              }
            
              100% {
                transform: rotate(360deg);
              }
            }
          }
          @media screen and (min-height: 300px) and (max-height: 400px) {
            .needle {
              height: 10vh;
              transform: rotate(-15deg);
              &.playing {
                transform: rotate(15deg);
              }
            }
          }
          @media screen and (min-height: 400px) and (max-height: 500px) {
            .needle {
              height: 10vh;
              transform: rotate(-10deg);
              &.playing {
                transform: rotate(15deg);
              }
            }
          }
          @media screen and (min-height: 500px) and (max-height: 600px) {
            .needle {
              height: 10vh;
              transform: rotate(-10deg);
              &.playing {
                transform: rotate(15deg);
              }
            }
          }
          @media screen and (min-height: 600px) and (max-height: 750px) {
            .needle-box {
              top: 1vh;
              .needle {
                height: 14.5vh;
                transform: rotate(0deg);
                &.playing {
                  transform: rotate(25deg);
                }
              }
            }
          }
          @media screen and (min-height: 600px) and (max-height: 750px) and (min-width: 200px) and (max-width: 350px) {
            .needle-box {
              top: 8vh;
              .needle {
                height: 12vh;
                transform: rotate(0deg);
                &.playing {
                  transform: rotate(25deg);
                }
              }
            }
          }
          @media screen and (min-height: 750px) and (max-height: 900px) {
            .needle-box {
              top: 4vh;
              .needle {
                &.playing {
                  transform: rotate(25deg);
                }
              }
            }
          }
          @media screen and (min-height: 900px) and (max-height: 1100px) {
            .needle-box {
              top: 3vh;
              .needle {
                height: 14vh;
                &.playing {
                  transform: rotate(30deg);
                }
              }
            }
          }
          @media screen and (min-height: 1100px) and (max-height: 1450px) {
            .needle-box {
              top: 5vh;
              .needle {
                &.playing {
                  transform: rotate(26deg);
                }
              }
            }
          }
        }
        .ly {
          line-height: 1.3;
          color: rgb(255 255 255 / 45%);
          text-align: center;
          height: .3rem;
          @include df();
          align-items: center;
          justify-content: center;
        }
        .song-bar {
          color: rgba(255, 255, 255, .7);
          @include df();
          align-items: center;
          justify-content: space-evenly;
          padding: 1.8vh;
          .iconfont {
            font-size: .24rem;
          }
          .icon-aixin {
            color: #e70a0a;
          }
        }
      }

      .player-lyric {
        .volume-box {
          flex-shrink: 0;
          @include df();
          align-items: center;
          padding-right: .38rem;
          .iconfont {
            padding: 0 .22rem;
            font-size: .16rem;
            color: rgba(255, 255, 255, 0.7);
          }
        }
        .lyric-box {
          color: rgba(255, 255, 255, 0.6);
          overflow: scroll;
          position: relative;
          margin: .25rem 0;
          height: 100%;
          // scroll-behavior: smooth;
          .lyric-text {
            padding: 40vh .25rem;
            min-height: 100%;
            @include df(column);
            align-items: center;
            justify-content: center;
          }
          .line {
            line-height: 1.3;
            text-align: center;
            padding: .12rem 0;
            font-size: .14rem;
            transition: color .1s;
            &.active {
              color: #fff;
            }
          }
          .no-lyric {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      
    }
    .bottom-box {
      flex-shrink: 0;
      color: rgba(255, 255, 255, .7);
      
      .progress-box {
        padding: .8vh 1.5vw;
        padding-top: 1.2vh;
        @include df();
        color: rgba(255, 255, 255, 0.4);
        align-items: center;
        .music-progress {
          flex: 1;
        }
        .current-time, .duration-time {
          font-family: system-ui;
          min-width: 5em;
          font-size: .09rem;
          text-align: center;
          padding: 0 .12rem;
        }
        .current-time {
          color: rgba(255, 255, 255, .7);
        }
      }
      .control-bar {
        @include df();
        color: rgba(255, 255, 255, .8);
        align-items: center;
        justify-content: space-evenly;
        padding: 1.8vh;
        margin-bottom: 1vh;
        .status {
          @include df();
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          border: 1px solid #fff;
          padding: .12rem;
          transition: all .1s;
          &:active {
            box-shadow: 0 0 .03rem #fff;
          }
          .iconfont {
            font-size: .24rem;
            // width: .24rem;
            // height: .24rem;
          }
        }
        .iconfont {
          font-size: .26rem;
          transition: all .1s;
          &:active {
            text-shadow: 0 0 .03rem #fff;
          }
        }
        .icon-bofang2 {
          color: #fff;
        }
        .icon-PlayListbofangliebiao {
          font-size: .28rem;
        }
      }
    }
  }
}


@media screen and (min-height: 300px) and (max-height: 450px) {
  .control-bar, .song-bar {
    .iconfont {
      font-size: .16rem!important;
    }
  }
}